<template>
  <div :class="classObj" :style="styleObj">
    <label for="name">Name:</label>
    <input type="text" id="name" v-model="name" />
    <label for="age">Age:</label>
    <input type="number" id="age" v-model.number="age" />
  </div>+
</template>

<script setup>
import { watch, computed, ref } from "vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({}),
  },
});

const emits = defineEmits(["update:modelValue"]);

const name = ref(props.modelValue.name || "");
const age = ref(props.modelValue.age || "");

// 监听 name 和 age 的变化，并通知父组件
watch(name, (newValue) => {
  console.log(newValue,{ ...props.modelValue, name: newValue });
  emits("update:modelValue", { ...props.modelValue, name: newValue });
});
watch(age, (newValue) => {
  console.log(newValue);
  emits("update:modelValue", { ...props.modelValue, age: newValue });
});
// watch(props, (newValue) => {
//   console.log(newValue);

//   emits("update:modelValue", { ...props.modelValue, name: newValue });
// });

// 透传 class 和 style 属性
const classObj = computed(() => props.class);
const styleObj = computed(() => props.style);

defineExpose({ name, age });
</script>
